<template>
    <div class="main-plan-list-view">

      <modules-title class="title-position" titleName="工作计划列表">

        <template slot="btn">
          <el-button
            v-hasPermi="{v:['J:create']}"
            type="primary"
            size="mini"
            @click="addClick">创建工作计划</el-button>
        </template>

      </modules-title>

      <div class="pj-content">

        <div class="screen-view">

          <el-form
            ref="queryForm"
            :model="screenData"
            :inline="true"
            label-width="68px"
          >

            <el-form-item label="计划人员">
              <el-select
                v-model="screenData.belong_type"
                placeholder="请选择人员"
                size="small"
                @change="creatorChange"
              >
                <el-option
                  v-for="dict in creatorOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="计划状态">
              <el-select
                v-model="screenData.status"
                placeholder="请选择状态"
                size="small"
                @change="statusChange"
              >
                <el-option
                  v-for="dict in statusOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="项目">
              <el-select
                v-model="screenData.project_id"
                placeholder="请选择项目"
                size="small"
                @change="projectChange"
              >
                <el-option
                  v-for="dict in projectOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="任务">
              <el-select
                v-model="screenData.task_id"
                placeholder="请选择任务"
                size="small"
                @change="taskChange"
              >
                <el-option
                  v-for="dict in taskList"
                  :key="dict.id"
                  :label="dict.task_name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>


            <el-form-item>

              <el-button type="primary" size="small" @click="handleQuery">搜索
              </el-button>
              <el-button plain size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-table v-loading="loading" border size="medium" :data="tableData" @row-click="tableRowClick">
          <el-table-column label="工作内容" align="left" header-align="center" prop="work_content"/>
          <el-table-column label="执行人" align="center" prop="executor" width="80" />
          <el-table-column label="创建人" align="center" prop="creator_name" width="80" />
          <el-table-column label="开始时间" align="center" prop="plan_start_time" width="120">
            <template slot-scope="scope">
              {{scope.row.plan_start_time ? dateFormat1('yyyy-mm-dd',scope.row.plan_start_time) : ''}}
            </template>
          </el-table-column>
          <el-table-column label="结束时间" align="center" prop="plan_end_time" width="120">
            <template slot-scope="scope">
              {{scope.row.plan_end_time ? dateFormat1('yyyy-mm-dd',scope.row.plan_end_time) : ''}}
            </template>
          </el-table-column>
          <el-table-column label="实际开始时间" align="center" prop="reality_start_time" width="160">
            <template slot-scope="scope">
              {{scope.row.reality_start_time ? dateFormat1('yyyy-mm-dd HH:MM:SS',scope.row.reality_start_time) : ''}}
            </template>
          </el-table-column>
          <el-table-column label="实际结束时间" align="center" prop="reality_end_time" width="160">
            <template slot-scope="scope">
              {{scope.row.reality_end_time ? dateFormat1('yyyy-mm-dd HH:MM:SS',scope.row.reality_end_time) : ''}}
            </template>
          </el-table-column>
          <el-table-column label="项目信息" align="center" prop="project_message" width="200" />
          <el-table-column label="任务信息" align="center" prop="task_message" width="200" />
          <el-table-column label="状态" align="center" prop="info_status" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">未开始</span>
              <span v-else-if="scope.row.status == 2">进行中</span>
              <span v-else-if="scope.row.status == 3">已结束</span>
              <span v-else-if="scope.row.status == 4">无法完成</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" header-align="center">
            <template slot-scope="scope">

<!--              <el-button class="text-btn-yellow" size="medium" type="text" icon="el-icon-order" @click="detailClick(scope.row.id)">-->
<!--                详情-->
<!--              </el-button>-->

              <el-button size="medium" type="text" v-if="scope.row.status == 1 && checkCreator(scope.row.executor_id)" @click="changeStatus(scope.row.id,2)">
                开始
              </el-button>

              <el-button size="medium" type="text" v-if="scope.row.status == 2 && checkCreator(scope.row.executor_id)" @click="detailClick(scope.row.id)">
                结束
              </el-button>

              <el-button class="text-btn-red" size="medium" type="text" v-if="scope.row.status == 1 && checkCreator(scope.row.creator_id)" @click="deleteClick(scope.row.id)">
                删除
              </el-button>

            </template>
          </el-table-column>
        </el-table>

        <pagination
          style="display:flex;justify-content:flex-end;"
          :total="total"
          :page.sync="screenData.pager.skip"
          :limit.sync="screenData.pager.limit"
          @pagination="getListData"
        />

      </div>

      <el-dialog
        title="工作计划详情"
        :visible.sync="detailVisible"
        width="700px"
        :before-close="detailClose">

        <work-plan-detail-view :data="planDetail" :changes="changeData"></work-plan-detail-view>

        <span slot="footer" class="dialog-footer">
          <el-button v-if="planDetail.status == 1 && checkCreator(planDetail.creator_id)" @click="deleteClick(planDetail.id)">删 除</el-button>
          <el-button type="primary" v-if="planDetail.status == 1 && checkCreator(planDetail.executor_id)" @click="changeStatus(planDetail.id,2)">开 始</el-button>
          <el-button type="primary" v-if="planDetail.status == 2 && checkCreator(planDetail.executor_id)" @click="closeConfirm">结 束</el-button>
        </span>
      </el-dialog>

      <el-dialog
        v-if="dialogVisible"
        title="创建工作计划"
        :visible.sync="dialogVisible"
        width="700px"
        :before-close="handleClose">

        <add-plan-view ref="addPlan" :task-list="taskList"></add-plan-view>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
  import addPlanView from "./modules/addPlanView";
  import workPlanDetailView from "../project/details/modules/taskListView/modules/workPlanDetailView";

    export default {
        name: "index",
        components:{workPlanDetailView,addPlanView},
        data:function () {
            return{
                loading:false,
                tableData:[],
                pageSize:10,
                pageNum:1,
                total:0,

                planDetail:{},
                detailVisible:false,

                changeData:{
                    task_progress:0,
                },

                dialogVisible:false,

                addData:{},
                planData:{},
                taskList:[],

                screenData:{
                    belong_type:0,
                    status:0,
                    project_id:'',
                    task_id:'',
                    pager:{
                        limit:10,
                        skip:1,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                },
                creatorOptions:[
                    {
                        value:0,
                        label:'全部'
                    },
                    {
                        value:1,
                        label:'我创建的'
                    },
                    {
                        value:2,
                        label:'我执行的'
                    },
                    {
                        value:3,
                        label:'我下级执行的'
                    }
                ],
                statusOptions:[
                    {
                        value:0,
                        label:'全部'
                    },
                    {
                        value:1,
                        label:'未开始'
                    },
                    {
                        value:2,
                        label:'进行中'
                    },
                    {
                        value:3,
                        label:'已结束'
                    }
                ],
                projectOptions:[],
            }
        },
        mounted:function() {
            this.getListData()
            this.getTaskList();
            this.getProjectList();
        },
        methods:{
            handleQuery:function(){
                this.screenData.pager.skip = 1;

                this.getListData();
            },
            resetQuery:function(){
                this.screenData.belong_type = 0;
                this.screenData.status = 0;
                this.screenData.project_id = '';
                this.screenData.task_id = '';
                this.screenData.pager.skip = 1;

                this.getListData();
            },
            creatorChange:function(){
                this.screenData.pager.skip = 1;

                this.getListData();
            },
            statusChange:function(){
                this.screenData.pager.skip = 1;

                this.getListData();
            },
            projectChange:function(){
                this.screenData.task_id = ''

                this.screenData.pager.skip = 1;

                this.getListData();
            },
            taskChange:function(){
                this.screenData.project_id = ""

                this.screenData.pager.skip = 1;

                this.getListData();
            },
            checkCreator:function(id){
                if (this.$store.getters.userInfo.user.id == id){
                    return true
                }
                return false
            },
            getProjectList:function(){
                this.$api.PROJECT_START_PROJECT_LIST_ONGOING().then(res=>{
                    if (res.code == 200){
                        this.projectOptions = res.data;
                    }
                }).catch(err=>{

                })
            },
            getTaskList:function(){
                let data1 = {
                    status:-1,
                    with_me:0,
                    task_type:0,
                    task_name:'',
                    pager:{
                        limit:100,
                        skip:1,
                    }
                }
                this.$api.PROJECT_START_TASK_LIST(data1).then(res=>{
                    if (res.code == 200){
                        this.taskList = res.data.data;
                    }
                }).catch(err=>{

                })
            },
            handleClose:function(){
                this.dialogVisible = false;
            },
            detailClose:function(){
                this.detailVisible = false;
            },
            addClick:function () {
                this.dialogVisible = true;
            },
            getListData:function () {
                this.$api.PROJECT_WORK_PLAN_LIST(this.screenData).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            detailClick:function(id){
                this.getWorkPlan(id);
            },
            tableRowClick:function(row, column, event){
                // if (column.label != '操作'){
                //     this.getWorkPlan(row.id);
                // }
            },
            getWorkPlan:function (id) {
                this.$api.PROJECT_WORK_PLAN_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.planDetail = res.data;
                        this.detailVisible = true;
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            closeConfirm:function () {
                this.detailVisible = false;

                this.$api.PROJECT_WORK_PLAN_STATUS(this.planDetail.id,3,this.changeData).then(res=>{
                    if (res.code == 200){
                        this.getListData();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            changeStatus:function (id,status) {
                this.detailVisible = false;
                this.$api.PROJECT_WORK_PLAN_STATUS(id,status,{}).then(res=>{
                    if (res.code == 200){
                        this.getListData();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })

            },
            deleteClick:function (id) {

                this.$confirm('此操作将永久删除该计划, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.detailVisible = false;
                    this.$api.PROJECT_WORK_PLAN_DELETE(id).then(res=>{
                        if (res.code == 200){
                            this.getListData();
                        }else {
                            this.$message.error(res.msg)
                        }
                    }).catch(err=>{

                    })

                }).catch(() => {

                });

            },
            confirmClick:function () {
                if (this.$refs.addPlan){
                    this.$refs.addPlan.formValidate().then(val=>{
                        if (val){
                            this.planData = this.$refs.addPlan.data
                            this.planData.plan_start_time = this.dealDateStr(new Date(this.planData.startTime)) + " 00:00:00"
                            this.planData.plan_end_time = this.dealDateStr(new Date(this.planData.endTime)) + " 23:59:59"
                            this.$api.PROJECT_WORK_PLAN_CREATE(this.planData).then(res=>{
                                if (res.code == 200){
                                    this.getListData();
                                }else {
                                    this.$message.error(res.msg)
                                }
                            }).catch(err=>{

                            })

                            this.dialogVisible = false;
                        }
                    })
                }



            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
        }
    }
</script>

<style lang="scss">
  @import "../../../assets/scss/views/projectManagement/planList/planList.scss";
</style>
